<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>internals</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<p>古い日本語リファレンスでは.data()等が紹介されているけど、本家ドキュメントでは別みたい。</p>
<p>普段気にしなくていい感じなのでここにjQueryのバージョン(<span id="jqueryversion"></span>)を入れてお茶を濁すｗ</p>

<hr />

<p>ちなみに、.data()は、atrrと違ってオブジェクトをしまうことができるのが利点（だと思う）。</p>

　<span id="s1" test="">s1</span> : <span id="s2" test="">s2</span> : <span id="s3" test="">s3</span>

<script type="text/javascript">
<!-- 
$(function() {
	$("#jqueryversion").text($.fn.jquery);	// jQueryバージョン

	var str = "test data";
	var obj = {a:"a1",b:"b1"};

	$("#s1").attr("test",str);	// str をしまう
	$("#s1").click(function(){	// s1 をクリックしたら表示
		console.log($(this).attr("test"));
	});

	$("#s2").attr("test",obj);	// obj をしまう
	$("#s2").click(function(){	// s2 をクリックしたら表示
		var o = $(this).attr("test");
		console.log(o);
	});

	$("#s3").data("test",obj);	// obj を test にしまう
	$("#s3").data("moji",str);	// str を moji にしまう
	$("#s3").click(function(){	// s2 をクリックしたら表示
		var o = $(this).data("test");
		console.log(o);
		o = $(this).data("moji");
		console.log(o);
	});

});
// -->
</script>

</body>
</html>
